<div>
  <form nz-form [formGroup]="validateForm">
    <div nz-row>
      <div 
        *ngFor="let item of schemas.fieldList" 
        nz-col 
        class="gutter-row" 
        [nzSpan]="schemas.wrapperCol.nzSpan"
        [nzXs]="schemas.wrapperCol.nzXs"
        [nzSm]="schemas.wrapperCol.nzSm"
        [nzMd]="schemas.wrapperCol.nzMd"
        [nzLg]="schemas.wrapperCol.nzLg"
        [nzXl]="schemas.wrapperCol.nzXl"
        [nzXXl]="schemas.wrapperCol.nzXXl"
      >
        <!-- <app-form-item *ngIf="item.component === 'Input'" [schema]="item">9999</app-form-item> -->
        <nz-form-item *ngIf="item.component === 'Input'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control 
            [nzErrorTip]="errorMsg[item.field]?.msg"
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <input (change)="item.onChange($event)" nz-input [formControlName]="item.field" [id]="item.field" [placeholder]="item.placeholder"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="item.component === 'InputNumber'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control 
            [nzErrorTip]="errorMsg[item.field]?.msg"
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <nz-input-number (ngModelChange)="item.onChange($event)" [formControlName]="item.field" [nzMin]="item.min" [nzMax]="item.max" [nzStep]="1" [nzPlaceHolder]="item.placeholder"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="item.component === 'InputTextArea'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control 
            [nzErrorTip]="errorMsg[item.field]?.msg"
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <textarea (change)="item.onChange($event)" [formControlName]="item.field" [placeholder]="item.placeholder" rows="4" nz-input [nzAutosize]="{ minRows: item.minRows, maxRows: item.maxRows }"></textarea>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="item.component === 'RadioGroup'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control
            [nzErrorTip]="errorMsg[item.field]?.msg"
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <nz-radio-group (ngModelChange)="item.onChange($event)" [formControlName]="item.field" nzName="radiogroup">
              <label *ngFor="let option of item.options" nz-radio [nzValue]="option[item.valueField]">{{option[item.labelField]}}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="item.component === 'Select'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control
            [nzErrorTip]="errorMsg[item.field]?.msg"
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <nz-select
              nzAllowClear
              [nzPlaceHolder]="item.placeholder"
              [formControlName]="item.field"
              (ngModelChange)="item.onChange($event)"
            >
              <nz-option *ngFor="let option of item.options" [nzValue]="option" [nzLabel]="option[item.labelField]" [nzValue]="option[item.valueField]"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="item.component === 'Switch'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <nz-switch (ngModelChange)="item.onChange($event)" [formControlName]="item.field"></nz-switch>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="item.component === 'DatePicker'">
          <nz-form-label 
            [nzSpan]="item.colProps?.label?.span || schemas.baseColProps.label.span"
            [nzXs]="item.colProps?.label?.nzXs || schemas.baseColProps.label.nzXs"
            [nzSm]="item.colProps?.label?.nzSm || schemas.baseColProps.label.nzSm"
            [nzMd]="item.colProps?.label?.nzMd || schemas.baseColProps.label.nzMd"
            [nzLg]="item.colProps?.label?.nzLg || schemas.baseColProps.label.nzLg"
            [nzXl]="item.colProps?.label?.nzXl || schemas.baseColProps.label.nzXl"
            [nzXXl]="item.colProps?.label?.nzXXl || schemas.baseColProps.label.nzXXl"
            [nzRequired]="item.required" 
            [nzFor]="item.field"
          >
            {{item.label}}
          </nz-form-label>
          <nz-form-control
            [nzErrorTip]="errorMsg[item.field]?.msg"
            [nzSpan]="item.colProps?.control?.span || schemas.baseColProps.control.span"
            [nzXs]="item.colProps?.control?.nzXs || schemas.baseColProps.control.nzXs"
            [nzSm]="item.colProps?.control?.nzSm || schemas.baseColProps.control.nzSm"
            [nzMd]="item.colProps?.control?.nzMd || schemas.baseColProps.control.nzMd"
            [nzLg]="item.colProps?.control?.nzLg || schemas.baseColProps.control.nzLg"
            [nzXl]="item.colProps?.control?.nzXl || schemas.baseColProps.control.nzXl"
            [nzXXl]="item.colProps?.control?.nzXXl || schemas.baseColProps.control.nzXXl"
          >
            <nz-date-picker (nzOnOk)="item.onChange($event)" [nzMode]="'date'" [formControlName]="item.field"></nz-date-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <nz-form-item 
        *ngIf="schemas.showActionButtonGroup" 
        [style]="{textAlign: schemas.buttonAlign}"
        nz-col
        [nzSpan]="schemas.wrapperCol.span"
        [nzXs]="schemas.wrapperCol.nzXs"
        [nzSm]="schemas.wrapperCol.nzSm"
        [nzMd]="schemas.wrapperCol.nzMd"
        [nzLg]="schemas.wrapperCol.nzLg"
        [nzXl]="schemas.wrapperCol.nzXl"
        [nzXXl]="schemas.wrapperCol.nzXXl"
      >
        <button class="button-cancel" nz-button nzType="default">取消</button>
        <button nz-button nzType="primary" (click)="submit()">提交</button>
      </nz-form-item>
    </div>
  </form>
  
</div>
